<template>
  <van-tabbar v-model="active" route>
    <van-tabbar-item 
      to="/home" 
      icon="home-o"
      :badge="cartCount > 0 ? cartCount : ''"
    >
      首页
    </van-tabbar-item>
    <van-tabbar-item to="/category" icon="apps-o">
      分类
    </van-tabbar-item>
    <van-tabbar-item to="/cart" icon="shopping-cart-o">
      购物车
    </van-tabbar-item>
    <van-tabbar-item to="/my" icon="user-o">
      我的
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useCartStore } from '@/stores/cart'

const route = useRoute()
const cartStore = useCartStore()

// 当前激活的标签
const active = ref(0)

// 购物车数量
const cartCount = computed(() => cartStore.totalCount)

// 根据路由设置激活的标签
const setActiveTab = () => {
  const path = route.path
  switch (path) {
    case '/home':
      active.value = 0
      break
    case '/category':
      active.value = 1
      break
    case '/cart':
      active.value = 2
      break
    case '/my':
      active.value = 3
      break
    default:
      active.value = 0
  }
}

// 监听路由变化
watch(() => route.path, setActiveTab, { immediate: true })
</script>

<style lang="scss" scoped>
:deep(.van-tabbar-item) {
  color: #333333;
}

:deep(.van-tabbar-item--active) {
  color: #333333;
}

:deep(.van-tabbar-item__icon) {
  font-size: 20px;
}

:deep(.van-tabbar-item__text) {
  font-size: 12px;
}
</style> 